<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width= , initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.0/normalize.css">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>

<body>
  <div class="main-wrapper">
    <header>
      <nav>
        <div class='logo'>
          <a href="#">王比</a>
        </div>
        <ul>
          <li>
            <a href="#">首页</a>
          </li>
          <li>
            <a href="#">链接3</a>
          </li>
          <li id='sidebar_trigger'>
            <a href="#">侧栏菜单</a>
          </li>
        </ul>
      </nav>
      <div id="banner">
        <div class="inner">
          <h1>王比</h1>
          <p class='sub-heading'>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </p>
          <button>养我</button>
          <div class="more"> 更多</div>
        </div>
      </div>
    </header>
    <div class='content'></div>
    <section class='green-section'>
      <div class='wrapper'>
        <div>
          <h2>一个标题</h2>
          <div class="hr"></div>
          <p class='sub-heading'>Lorem ipingsm dolorum dolor deserunt aliquid aliquam quaerat.</p>
        </div>
        <div class='icon-group'>
          <span class='icon'>item1</span>
          <span class='icon'>item2</span>
          <span class='icon'>item3</span>
        </div>
      </div>
    </section>
    <section class='gray-section'>
      <div class="article-preview">
        <div class="img-section">
          <img src="img/pic01.jpg" alt="" srcset="">
        </div>
        <div class="text-section">
          <h2>又一个标题</h2>
          <div class="sub-heading">我是副标题你好</div>
          <p>Lorem ipsum d. Revid quibionem doloribus ut dolor, iusto ipsam debitis esse cumque similique. Enim?</p>
        </div>
      </div>
      <div class="article-preview">
        <div class="text-section">
          <h2>又一个标题</h2>
          <div class="sub-heading">我是副标题你好</div>
          <p>Lorem ipsum d. Revid quibionem doloribus ut dolor, iusto ipsam debitis esse cumque similique. Enim?</p>
        </div>
        <div class="img-section">
          <img src="img/pic02.jpg" alt="" srcset="">
        </div>
      </div>
      <div class="article-preview">
        <div class="img-section">
          <img src="img/pic03.jpg" alt="" srcset="">
        </div>
        <div class="text-section">
          <h2>又一个标题</h2>
          <div class="sub-heading">我是副标题你好</div>
          <p>Lorem ipsum d. Revid quibionem doloribus ut dolor, iusto ipsam debitis esse cumque similique. Enim?</p>
        </div>
      </div>
    </section>
    <section class='purple-section'>
      <div class="wrapper">
        <div class="heading-wrapper">
          <h2>又一个标题</h2>
          <div class="hr"></div>
          <div class="sub-heading">m dolconsiriam,lconsiriam,lconsiriam, e porro vel, maiores ea beatae inventore similique quasi illo eligendi quos</div>
        </div>
        <div class="card-group clearfix">
          <div class="card">
            <h3>标题3</h3>
            <p>Lorem ipsudiimtur a in, quam itaque dignissimos ut magni vel cum vero, at tempora dolore ratione ipsa!</p>
          </div>
          <div class="card">
            <h3>标题3</h3>
            <p>Lorem ipsudiimtur a in, quam itaque dignissimos ut magni vel cum vero, at tempora dolore ratione ipsa!</p>
          </div>
          <div class="card">
            <h3>标题3</h3>
            <p>Lorem ipsudiimtur a in, quam itaque dignissimos ut magni vel cum vero, at tempora dolore ratione ipsa!</p>
          </div>
          <div class="card">
            <h3>标题3</h3>
            <p>Lorem ipsudiimtur a in, quam itaque dignissimos ut magni vel cum vero, at tempora dolore ratione ipsa!</p>
          </div>
        </div>

    </section>
    <footer>
      <ul class='share-group'>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
      </ul>
      <div class="copy">
        &copy王比 -2060
      </div>
    </footer>
    </div>
    <div class="mask"></div>
    <div id="sidebar">
      <ul>
        <li>
          <a href="#">item1</a>
        </li>
        <li>
          <a href="#">item2</a>
        </li>
        <li>
          <a href="#">item3</a>
        </li>
        <li>
          <a href="#">item4</a>
        </li>
        <li>
          <a href="#">item5</a>
        </li>
      </ul>
    </div>
    <button class='back-to-top'>返回顶部</button>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="index.js"></script>
</body>

</html>